<template>
  <Card class="!m-10px">
    <Button type="primary" class="mb-10px" @click="saveUserVisible = true">添加用户</Button>

    <Table
      :columns="columns"
      :data-source="userList"
      bordered
      :pagination="{
        // 当前页码
        current,
        // 每页条数
        pageSize,
        // 总数
        total,
        // 每页条数的可选项
        pageSizeOptions: ['3', '6', '9', '12'],
        // 显示快速跳转页码
        showQuickJumper: true,
        // 显示修改每页条数
        showSizeChanger: true,
        // 显示总数
        showTotal: (total) => `总共 ${total} 条`,
        onChange: getUserList,
        onShowSizeChange: getUserList,
      }"
      :loading="loading"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.dataIndex === 'index'"> {{ index + 1 }} </template>
        <template v-if="column.dataIndex === 'operator'">
          <Button type="primary" @click="showAssignRole(record)"> 分配角色 </Button>
          <Button
            danger
            class="
              !border-orange-500
              !text-orange-500
              hover:(
              !border-orange-300
              !text-orange-300
              )
              mx-10px
            "
          >
            更新
          </Button>
          <Button danger> 删除 </Button>
        </template>
      </template>
    </Table>

    <Modal v-model:visible="saveUserVisible" @ok="saveUser" title="添加用户">
      <Form :label-col="{ span: 6 }" class="m-10px">
        <FormItem label="用户名称"><Input v-model:value="user.username" /></FormItem>
        <FormItem label="用户昵称"><Input v-model:value="user.nickName" /></FormItem>
        <FormItem label="用户密码"><Input v-model:value="user.password" /></FormItem>
      </Form>
    </Modal>

    <Modal v-model:visible="assignRoleVisible" @ok="assignRole" title="分配角色">
      <Form :label-col="{ span: 6 }" class="m-10px">
        <FormItem label="用户名称">{{ assignUser.username }}</FormItem>
        <FormItem label="用户昵称">
          <CheckboxGroup v-model:value="assignUser.roleName">
            <Row>
              <Col :span="8" v-for="role in allRolesList" :key="role.id">
                <Checkbox :value="role.id">
                  {{ role.roleName }}
                </Checkbox>
              </Col>
            </Row>
          </CheckboxGroup>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'User',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import {
    Card,
    Table,
    Button,
    Modal,
    Form,
    FormItem,
    Input,
    CheckboxGroup,
    Checkbox,
    Row,
    Col,
  } from 'ant-design-vue';
  import {
    getUserListApi,
    saveUserApi,
    getUserRoleListApi,
    assignUserRoleListApi,
  } from '/@/api/acl/user';
  import { UserListModel, UserModel } from '/@/api/acl/model/userModel';
  import { RoleListModel } from '/@/api/acl/model/roleModel';

  // const emits = defineEmits(['setIsShowRoleList', 'setRole']);

  const columns = [
    {
      title: '序号',
      className: 'w-70px !text-center',
      dataIndex: 'index',
    },
    {
      title: '名称',
      dataIndex: 'username',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
    },
    {
      title: '角色列表',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      className: 'w-300px',
      dataIndex: 'operator',
    },
  ];

  const userList = ref<UserListModel>([]);
  const current = ref<number>(1);
  const pageSize = ref<number>(3);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);

  const saveUserVisible = ref<boolean>(false);
  const user = reactive<UserModel>({
    username: '',
    nickName: '',
    password: '',
  });
  const assignRoleVisible = ref<boolean>(false);
  const assignUser = reactive<UserModel>({
    id: '',
    username: '',
    roleName: [],
  });
  const allRolesList = ref<RoleListModel>([]);

  const showAssignRole = async (user) => {
    assignUser.id = user.id;
    assignUser.username = user.username;
    // 发送请求，获取角色列表
    const res = await getUserRoleListApi(user.id);
    assignUser.roleName = res.assignRoles.map((role) => role.id as string);
    allRolesList.value = res.allRolesList;
    assignRoleVisible.value = true;
  };

  const getUserList = async (page: number, limit: number) => {
    loading.value = true;
    const res = await getUserListApi(page, limit);
    userList.value = res.items;
    total.value = res.total;
    current.value = page;
    pageSize.value = limit;
    loading.value = false;
  };

  onMounted(() => {
    getUserList(current.value, pageSize.value);
  });

  const saveUser = async () => {
    await saveUserApi(user);
    getUserList(current.value, pageSize.value);
    saveUserVisible.value = false;
  };

  const assignRole = async () => {
    await assignUserRoleListApi(assignUser.id as string, assignUser.roleName as string[]);
    getUserList(current.value, pageSize.value);
    assignRoleVisible.value = false;
  };
</script>
